<template>
  <div>
    <HmDog
      v-for="(item, index) in list"
      :key="index"
      :dogImgUrl="item.dogImgUrl"
      :dogName="item.dogName"
      @love="fn"
    ></HmDog>
    <hr />
    <p>显示喜欢的狗</p>
    <ul>
      <li v-for="(item, index) in listLove" :key="index">{{ item }}</li>
    </ul>
    <hr />
    <LianXi
      v-for="(item, index) in goodsArr"
      :key="index"
      :obj="item"
      @add="item.count = +$event"
    >
    </LianXi>
    <p>总数量:{{ sum }}</p>
    <hr />
    <h3>商品清单如下</h3>
    <ul>
      <li v-for="(item, index) in foodList" :key="index">
        {{ item.shopName }}{{ item.price }}/份
      </li>
    </ul>
    <h3>请选择要购买的数量</h3>
  <div>
      <LianXi3
      v-for="(item, index) in foodList"
      :key="index"
      :obj="item"
      @change-num="item.count = $event"
    ></LianXi3>
  </div>
    <p>总价为：{{ sum1 }}</p>

<hr>

  <div>  <MySubject v-for='(item,index) in arr' :key='index' :obj='item' @tijiao='item.result=$event'></MySubject></div>
   
  </div>
  <div> <MyFlag v-for='(item,index) in arr' :key="index" :obj='item' :index="index"></MyFlag></div>
</template>

<script>
import HmDog from "./components/hm-dog.vue";
import LianXi from "./components/lianxi-two.vue";
import LianXi3 from "./components/lianxi-three.vue";
import MySubject from "./components/my-subject.vue";
import MyFlag from "./components/my-flag.vue";
export default {
  // 自动执行  随机生成5组数字 类似于window.onload里面写代码会自动执行
  created() {
    const arr = [];
    for (let i = 0; i < 5; i++) {
      const left = Math.floor(Math.random() * 11);
      const right = Math.floor(Math.random() * 11);
      arr.push({ left, right,result:null});
    }
    this.arr = arr;
  },
  data() {
    return {
      list: [
        {
          dogImgUrl:
            "http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg",
          dogName: "博美",
        },
        {
          dogImgUrl:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1224576619,1307855467&fm=26&gp=0.jpg",
          dogName: "泰迪",
        },
        {
          dogImgUrl:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2967740259,1518632757&fm=26&gp=0.jpg",
          dogName: "金毛",
        },
        {
          dogImgUrl:
            "https://pic1.zhimg.com/80/v2-7ba4342e6fedb9c5f3726eb0888867da_1440w.jpg?source=1940ef5c",
          dogName: "哈士奇",
        },
        {
          dogImgUrl:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563813435580&di=946902d419c3643e33a0c9113fc8d780&imgtype=0&src=http%3A%2F%2Fvpic.video.qq.com%2F3388556%2Fd0522aynh3x_ori_3.jpg",
          dogName: "阿拉斯加",
        },
        {
          dogImgUrl:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563813454815&di=ecdd2ebf479568453d704dffacdfa12c&imgtype=0&src=http%3A%2F%2Fwww.officedoyen.com%2Fuploads%2Fallimg%2F150408%2F1-15040Q10J5B0.jpg",
          dogName: "萨摩耶",
        },
      ],
      goodsArr: [
        {
          count: 0,
          goodsName: "Watermelon",
        },
        {
          count: 0,
          goodsName: "Banana",
        },
        {
          count: 0,
          goodsName: "Orange",
        },
        {
          count: 0,
          goodsName: "Pineapple",
        },
        {
          count: 0,
          goodsName: "Strawberry",
        },
      ],
      listLove: [],  //用来存喜欢的狗的名字
      foodList: [
        {
          shopName: "可比克薯片",
          price: 5.5,
          count: 0,
        },
        {
          shopName: "草莓酱",
          price: 3.5,
          count: 0,
        },
        {
          shopName: "红烧肉",
          price: 55,
          count: 0,
        },
        {
          shopName: "方便面",
          price: 12,
          count: 0,
        },
      ],
      // 数据必须初始化
      arr: [],
    };
  },
  components: {
    HmDog,
    LianXi,
    LianXi3,
    MySubject,
    MyFlag,
  },
  methods: {
    fn(name) {
      this.listLove.push(name);
    },
  },
  computed: {
    sum() {
      return this.goodsArr.reduce((sum, item) => (sum += item.count), 0);
    },
    sum1() {
      return this.foodList.reduce((sum1, item) => item.price * item.count, 0);
    },
  },
};
</script>

<style scoped></style>
